<template>
  <div class="chat">
    <!-- <vue-advanced-chat
      :current-user-id="currentUserId"
      :rooms="JSON.stringify(rooms)"
      :rooms-loaded="true"
      :messages="JSON.stringify(messages)"
      :messages-loaded="messagesLoaded"
      @send-message="sendMessage($event.detail[0])"
      @fetch-messages="fetchMessages($event.detail[0])"
      @menu-action-handler="console.log($event.detail[0])"
    /> -->
      <!-- :single-room="false"
      :show-search="false"
      :show-add-room="false"
      :show-files="false"
      :show-audio="false"
      :show-emojis="false"
      :show-reaction-emojis="false" -->
      <vue-advanced-chat
      v-if="show"
      :current-user-id="currentUserId"
      :rooms-loaded="true"
      :messages-loaded="messagesLoaded"
      .rooms="rooms"
      .messages="messages"
      :message-actions="[]"
      :menu-actions="[]"
      :show-reaction-emojis="false"
     :message-selection-actions="[]"
      :text-messages="JSON.stringify(textMessages)"
      @fetch-messages="fetchMessages($event.detail[0])"
      @send-message="sendMessage($event.detail[0])"
    >
    <!-- theme="dark" -->
    <!-- :text-messages="{
      ROOMS_EMPTY: 'Aucune conversation',
      ROOM_EMPTY: 'Aucune conversation sélectionnée',
      NEW_MESSAGES: 'Nouveaux messages',
      MESSAGE_DELETED: 'Ce message a été supprimé',
      MESSAGES_EMPTY: 'Aucun message',
      CONVERSATION_STARTED: 'La conversation a commencée le :',
      TYPE_MESSAGE: 'Tapez votre message',
      SEARCH: 'Rechercher',
      IS_ONLINE: 'est en ligne',
      LAST_SEEN: 'dernière connexion ',
      IS_TYPING: 'est en train de taper...',
      CANCEL_SELECT_MESSAGE: 'Annuler Sélection'
    }" -->
    <!-- <div slot='room-header' >这是一个新的房间标题</div>  -->
    <!-- <div slot="room-header">
      This is a new room header
    </div>

    <div v-for="message in messages" :slot="'message_' + message._id" :key="message+''">
      <div v-if="message.system">
        System message: {{ message.content }}
      </div>
      <div v-else>
        Normal message: {{ message.content }}
      </div>
    </div>

    <div v-for="message in messages" :slot="'message-avatar_' + message._id" :key="message+''">
      New Avatar
    </div> -->
 
    </vue-advanced-chat>
    <!-- :theme="theme"
	:loading-rooms="loadingRooms"
	:rooms-loaded="roomsLoaded" -->
  </div>
</template>
<!-- https://gitee.com/beekim/vue-advanced-chat -->
<script lang="ts" setup>
import { onActivated, onDeactivated, ref } from "vue";
import { register, Room, Message } from "vue-advanced-chat";
import { useI18n } from "vue-i18n";

const { t } = useI18n();
const textMessages = ref({
  "ROOMS_EMPTY":"12312",
  "ROOM_EMPTY":"21321",
  "NEW_MESSAGES":"2321",
  "MESSAGE_DELETED":"213123",
  "MESSAGES_EMPTY":"12321",
  "CONVERSATION_STARTED":"",
  "TYPE_MESSAGE":`${t('ui.login.userNamePlaceholder')}`,
  "SEARCH":"",
  "IS_ONLINE":"",
  "LAST_SEEN":"",
  "IS_TYPING":"",
  "CANCEL_SELECT_MESSAGE":""
})
const show = ref<Boolean>(false);
// import { register } from '@/vue-advanced-chat/dist/vue-advanced-chat.es.js'
let currentUserId = ref<string>("1234");
let rooms = ref<Room[]>([
  {
    roomId: "1",
    roomName: "房间A",
    avatar: "/src/assets/images/user.png",
    users: [
      {
        _id: "1234",
        username: "John Doe",
        avatar: "/src/assets/images/user.png",
        status: {
          state: "offline",
          lastChanged: String(new Date().getTime())
        }
      },
      {
        _id: "4321",
        username: "John Doe11",
        avatar: "/src/assets/images/user.png",
        status: {
          state: "offline",
          lastChanged: String(new Date().getTime())
        }
      },
      {
        _id: "55555",
        username: "John Doe22222",
        avatar: "/src/assets/images/user.png",
        status: {
          state: "offline",
          lastChanged: String(new Date().getTime())
        }
      }
    ]
  },
  {
    roomId: "11",
    roomName: "房间As",
    avatar: "/src/assets/images/user.png",
    users: [
      {
        _id: "1234",
        username: "John Doe",
        avatar: "/src/assets/images/user.png",
        status: {
          state: "offline",
          lastChanged: String(new Date().getTime())
        }
      },
      {
        _id: "4321",
        username: "John Doe11",
        avatar: "/src/assets/images/user.png",
        status: {
          state: "offline",
          lastChanged: String(new Date().getTime())
        }
      },
      {
        _id: "55555",
        username: "John Doe22222",
        avatar: "/src/assets/images/user.png",
        status: {
          state: "offline",
          lastChanged: String(new Date().getTime())
        }
      }
    ]
  },
  {
    roomId: "13",
    roomName: "房间Ad",
    avatar: "/src/assets/images/user.png",
    users: [
      {
        _id: "1234",
        username: "John Doe",
        avatar: "/src/assets/images/user.png",
        status: {
          state: "offline",
          lastChanged: String(new Date().getTime())
        }
      },
      {
        _id: "4321",
        username: "John Doe11",
        avatar: "/src/assets/images/user.png",
        status: {
          state: "offline",
          lastChanged: String(new Date().getTime())
        }
      },
      {
        _id: "55555",
        username: "John Doe22222",
        avatar: "/src/assets/images/user.png",
        status: {
          state: "offline",
          lastChanged: String(new Date().getTime())
        }
      }
    ]
  }
]);
let messages = ref<Message[]>([]);
let messagesLoaded = ref<Boolean>(false);

onActivated(() => {
  show.value = true;
  register();
});
onDeactivated(() => {
  show.value = false;
})

const fetchMessages = ({ options = {
  reset: false
} }) => {
  setTimeout(() => {
    if (options?.reset) {
      messages.value = addMessages(true);
    } else {
      messages.value = [...addMessages(false), ...messages.value];
      messagesLoaded.value = true;
    }
    // addNewMessage()
  });
};

const addMessages = (reset: Boolean) => {
  const addmessages = [] as Message[];

  for (let i = 0; i < 30; i++) {
    addmessages.push({
      _id: String(reset ? i : messages.value.length + i),
      content: `${reset ? "" : "paginated"} message ${i + 1}`,
      senderId: "4321",
      username: "John Doe",
      date: "13 November",
      timestamp: "10:20",
      // deleted: true
      // system: true
    });
  }

  return addmessages;
};

const sendMessage = (message: Message) => {
  
  messages.value = [
    ...messages.value,
    {
      _id: String(messages.value.length),
      content: message.content,
      senderId: currentUserId.value,
      timestamp: new Date().toString().substring(16, 21),
      date: new Date().toDateString()
    }
  ];
};

// const addNewMessage = () => {
//   setTimeout(() => {
//     messages.value = [
//       ...messages.value,
//       {
//       	_id: String(messages.value.length),
//         content: "NEW MESSAGE",
//         senderId: "1234",
//         timestamp: new Date().toString().substring(16, 21),
//         date: new Date().toDateString()
//       }
//     ];
//   }, 2000);
// };
</script>

<style lang="scss">
body {
  font-family: "Quicksand", sans-serif;
}
</style>
